<template>
  <div class="document-list-container">
    <div class="list-content" ref="lisrContent">
      <div
        class="list-item"
        v-for="item in list"
        :key="item.id"
      >
        <div class="item" @click="toDetail(item)">
            <div><img :src="getImage(item)" /></div>
            <div class="item-detail">
                <div class="item-title">{{ item.commodityName}}</div>
                <div class="item-no">{{$t('common.base.goodsNo')}}： {{ item.commodityCode }}</div>
                <div>¥{{ getPrice(item) }}</div>
            </div>
            <div class="share" @click.stop="shareGoods(item)">
                <i class="iconfont icon-share icon-article-share">{{$t('common.base.share')}}</i>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/** util */
import * as ImApi from '@src/api/ImApi.js';
import { getOssUrl } from '@src/util/assets'
const goodsDefault = getOssUrl('/goodsDefault.png');
import { customerServiceSendNewMessage } from '@src/modules/im/imChat/components/messageBox/send.js';
import EventBus from '@src/util/eventBus';
export default {
  name: 'goods-list',
  props: {
    keyword: {
      type: String,
      default: '',
    },
    list: {
      type: Array,
    },
    hxIdObj: {
      type: Object,
    },
  },
  data() {
    return {
      goodsDefault
    }
  },
  methods: {
    getPrice(row) {
      if(row.hasSpecs == 1) return row.priceStr || ''
      return this.numFilter(row.priceType === 1 ? row.originPrice : row.price) || 0
    },
    numFilter(value) {
      if (!value) return '';

      let tempVal = parseFloat(value).toFixed(3);
      let realVal = tempVal.substring(0, tempVal.length - 1);

      return realVal;
    },
    getImage(item) {
      if(item.attachmentList?.length && item.attachmentList[0]?.url ) {
        return item.attachmentList[0].url
      }
      return this.goodsDefault
    },
    // 跳转到详情页面
    toDetail(item) {
      this.$emit('toDetail', item);
    },
    async shareGoods(item) {
      this.$confirm(this.$t('im.imChat.components.chatDetail.title2'), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.confirm'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning'
      }).then(async() => {
        try {
          const params = {
            conversationId: this.hxIdObj.conversationId,
            messageType: 'serviceMallGoods',
          };
          let messageContent = {
            type: 'custom',
            customEvent: 'serviceMallGoods',
            customExts: {
              id: item.id,
              image: this.getImage(item),
              name: item.commodityName,
              salePrice: this.getPrice(item),
              serialNumber: item.commodityCode,
              standard: null
            }
          }
          params.messageContent = messageContent
          const messageInfo = await customerServiceSendNewMessage(params)
          EventBus.$emit('addMessageByKF', messageInfo)
        } catch (err) {
          console.log(err);
          this.$message.error(this.$t('common.base.tip.shareFail'));
        }
      })
      
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
    height: 58px;
    border-radius: 5px;
    display: flex;
    background: #FFFFFF;
    position: relative;
    img {
        width: 40px;
        height: 40px
    }
    .item-detail {
        margin-left: 12px;
        font-size: 12px;
        .item-title {
          width: 152px;
          white-space: nowrap;
          overflow: hidden; 
          text-overflow: ellipsis;
          font-size: 14px;
          font-weight: 600;
          color: #3D3D3D;
        }
        .item-no {
            margin: 4px 0;
        }
    }
    .share {
        position: absolute;
        right: 0px;
        font-size: 14px;
        font-weight: 500;
        color: $color-primary-light-6;
        .icon-article-share {
          font-size: 14px;
          color: $color-primary-light-6;
          font-weight: normal;
        }
    }
}
</style>